<template>
  <div class="info-item">
    <div class="line">
      <div class="cropper-content">
        <div class="cropper">
          <vue-cropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :fixedBox="option.fixedBox"
            @realTime="realTime"
            @imgLoad="imgLoad"
          ></vue-cropper>
        </div>
        <div style="margin-left:20px;">
          <div
            class="show-preview"
            :style="{'width': '150px', 'height':'150px',  'overflow': 'hidden', 'margin': '5px'}"
          >
            <div :style="previews.div" class="preview">
              <img :src="previews.url" :style="previews.img">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tool">
      <ButtonGroup size="small">
        <Tag color="default" @click.native="changeScale(-1)">缩小</Tag>
        <Tag color="default" @click.native="changeScale(1)">放大</Tag>
        <Tag color="default" @click.native="rotateLeft">左转</Tag>
        <Tag color="default" @click.native="rotateRight">右转</Tag>
        <Tag color="default" @click.native="down">下载</Tag>
        <Tag color="primary" @click.native="finish('blob')">上传</Tag>
        <label
          class="ivu-tag ivu-tag-primary btn-green"
          for="uploads"
          style="display:inline-block;width: 70px;padding: 0;text-align: center;"
        >选择图片</label>
      </ButtonGroup>
      <input
        type="file"
        id="uploads"
        :value="imgFile"
        style="position:absolute; clip:rect(0 0 0 0);"
        accept="image/png, image/jpeg, image/gif, image/jpg"
        @change="uploadImg($event, 1)"
      >
    </div>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
export default {
  data () {
    return {
      headImg: '',
      previews: {},
      option: {
        img: '',
        outputSize: 1, // 剪切后的图片质量（0.1-1）
        full: false, // 输出原图比例截图 props名full
        outputType: 'png',
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 150,
        autoCropHeight: 150,
        fixedBox: true
      },
      fileName: '', // 本机文件地址
      downImg: '#',
      imgFile: ''
    }
  },
  components: {
    VueCropper
  },
  methods: {
    // 放大/缩小
    changeScale (num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    // 坐旋转
    rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    // 右旋转
    rotateRight () {
      this.$refs.cropper.rotateRight()
    },
    // 上传图片（点击上传按钮）
    finish (type) {
      let _this = this
      // let formData = new FormData()
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          // let img = window.URL.createObjectURL(data)
          // formData.append('file', data, this.fileName)
          _this.$emit('upload', data)
          /* this.$http.post(Api.uploadSysHeadImg.url, formData, {contentType: false, processData: false, headers:{'Content-Type': 'application/x-www-form-urlencoded'}})
          .then((response)=>{
            var res = response.data;
            if(res.success == 1){
              $('#btn1').val('');
              _this.imgFile = '';
              _this.headImg = res.realPathList[0];  //完整路径
              _this.uploadImgRelaPath = res.relaPathList[0];  //非完整路径
              _this.$message({ //element-ui的消息Message消息提示组件
                type: 'success',
                message: '上传成功'
              });
            }
          }) */
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.model = true
          this.modelSrc = data
        })
      }
    },
    realTime (data) {
      this.previews = data
    },
    // 下载图片
    down (type) {
      var aLink = document.createElement('a')
      aLink.download = 'author-img'
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          this.downImg = window.URL.createObjectURL(data)
          aLink.href = window.URL.createObjectURL(data)
          aLink.click()
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.downImg = data
          aLink.href = data
          aLink.click()
        })
      }
    },
    // 选择本地图片
    uploadImg (e, num) {
      var _this = this
      var file = e.target.files[0]
      _this.fileName = file.name
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        _this.$Message.warning('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
        return false
      }
      var reader = new FileReader()
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') {
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        if (num === 1) {
          _this.option.img = data
        } else if (num === 2) {
          _this.example2.img = data
        }
      }
      reader.readAsArrayBuffer(file)
    },
    imgLoad (msg) {
      console.log('imgLoad')
      console.log(msg)
    }
  }

}
</script>
<style lang="less">
.tool {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.cropper-content {
  display: flex;
  justify-content: space-between;
  .cropper {
    width: 260px;
    height: 260px;
  }
  .show-preview {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    justify-content: center;
    .preview {
      overflow: hidden;
      border-radius: 50%;
      border: 1px solid #cccccc;
      background: #cccccc;
    }
  }
}
.btn-green {
  background: #19be6b !important;
  color: #fff !important;
}
</style>
